import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio, TouchableOpacity, Alert } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import ToastUtil from '../../../../utils/toast';

import { API, API_GENERATE } from '../../../../config/api';
import HTTP from '../../../../utils/http';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';

const scale = GLOBAL.SCALE;
export class ItemCpt extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    componentDidMount = () => { }
    async _claim () {
        let { leftBtnsList, data } = this.props || {};
        let res = await HTTP.POST(API_GENERATE(API.TURN_FOLLOW), { applyId: data.applyId });
        if (res) {
            ToastUtil.showSuccess('认领成功').then(() => {
                leftBtnsList.btnFun()
            });
        }

    }
    _alertMes () {
        let { roles } = this.props || {};
        if (roles === 'salesman') {
            Alert.alert(
                '提示',
                '确定认领该客户吗?',
                [
                    { text: '取消', onPress: () => console.log('Cancel Pressed') },
                    { text: '确定', onPress: () => { this._claim() } },
                ],
            )
        }
        else {
            Alert.alert('暂无操作权限')
        }
    }
    render () {
        let { data } = this.props || {};
        let { companyName, applyName, applyMobile, applyId, createTime, comments, isNew, clickClaim } = data || {};
        return (
            <View style={styles.box}>
                <View style={styles.ItemTimeBox}>
                    <Text style={styles.ItemTime}>{createTime}</Text>
                </View>
                <View style={styles.ItemBox}>
                    <View style={[styles.ItemHead, styles.ItemPd, styles.ItemBorder]}>
                        <View style={{ flexDirection: 'row' }}>
                            <Text style={styles.ItemHeadText}>{applyName} | {applyMobile} </Text>
                            {isNew === 'Y' ? <View style={styles.ItemHeadNew}><Text style={styles.ItemHeadNewText}>新</Text></View> : null}
                        </View>
                        <TouchableOpacity style={styles.ItemBtn} onPress={() => {
                            this._alertMes()
                        }}>
                            <Text style={[styles.ItemBtnText]}>认领</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={[styles.ItemBody, styles.ItemPd]}>
                        <View style={styles.ItemBodyUp}>
                            <Text style={styles.ItemBodyTitle}>企业</Text><Text style={styles.ItemBodyText}>{companyName}</Text>
                        </View>
                        <View style={styles.ItemBodyUp}>
                            <Text style={styles.ItemBodyTitle}>备注</Text><Text style={styles.ItemBodyRemark}>{comments || '-'}</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    box: {
        marginTop: 20 * scale,
        marginLeft: 15 * scale,
        marginRight: 15 * scale,
    },
    ItemBox: {
        backgroundColor: '#ffffff',
        borderRadius: 8 * scale
    },
    ItemTimeBox: {
        alignSelf: 'flex-end',
        marginBottom: 5 * scale
    },
    ItemTime: {
        fontSize: 12 * scale,
        color: '#848A96'
    },
    ItemBorder: {
        borderBottomColor: '#E3E7F0',
        borderBottomWidth: 2 * scale / PixelRatio.get(),
        flexDirection: 'row',
    },
    ItemHead: {
        height: 39 * scale,
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    ItemPd: {
        paddingLeft: 15 * scale,
        paddingRight: 15 * scale
    },
    ItemHeadText: {
        fontSize: 12 * scale,
        color: '#030303'
    },
    ItemHeadNew: {
        width: 15,
        height: 15,
        backgroundColor: '#E02020',
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 5 * scale
    },
    ItemHeadNewText: {
        color: '#fff',
        fontSize: 10 * scale,
        fontFamily: 'PingFangSC-Semibold'
    },
    ItemBody: {
        flexDirection: 'column',
        paddingBottom: 11 * scale,
        flexWrap: 'wrap',
        paddingTop: 10 * scale,
        flexDirection: 'row',
    },
    ItemBodyUp: {
        width: '100%',
        flexDirection: 'row',
        // justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: 8 * scale,
        paddingBottom: 6 * scale
    },
    ItemBodyTitle: {
        fontSize: 12 * scale,
        color: '#030303',
        opacity: 0.61,
        marginRight: 14 * scale,
    },
    ItemBodyText: {
        fontSize: 12 * scale,
        color: '#0C0C0D',
        fontWeight: 'bold'
    },
    ItemBodyLeft: {
        fontSize: 12 * scale
    },
    ItemBodyTagView: {
        flexDirection: 'row',
        // flexWrap: 'wrap'
    },
    ItemBodyTagBox: {
        marginBottom: 5 * scale,
        marginRight: 14 * scale,
        paddingLeft: 10 * scale,
        paddingRight: 10 * scale,
        paddingTop: 5 * scale,
        paddingBottom: 5 * scale,
        borderRadius: 10 * scale,
        backgroundColor: 'rgba(228,232,241,.5)',
    },
    ItemBodyTag: {
        fontSize: 10 * scale,
        color: '#000',
    },
    ItemBottom: {
        height: 50 * scale,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    ItemBtn: {
        paddingTop: 4 * scale,
        paddingBottom: 4 * scale,
        paddingLeft: 14 * scale,
        paddingRight: 14 * scale,
        borderColor: '#0E5BC6',
        borderWidth: 1 * scale,
        borderRadius: 26 * scale
    },
    ItemBtnText: {
        fontSize: 12 * scale,
        color: '#0E5BC6',
        fontFamily: 'PingFangSC-Semibold'
    },
    ItemBodyRemark: {
        fontSize: 12 * scale,
        color: '#030303',
        opacity: 0.61,
        marginRight: 30 * scale,
        lineHeight: 20 * scale
    },
    ItemBtnTextActive: {
        // color: '#BEC1C4',
    },
    ItemBtnActive: {
        // borderColor: '#BEC1C4',
    }
})